Custom Hooks: Επαναχρησιμοποιήσιμα Πρότυπα Λογικής στη React

Τα React Hooks έφεραν επανάσταση στον τρόπο με τον οποίο γράφουμε React components, εισάγοντας state και χαρακτηριστικά του κύκλου ζωής (lifecycle features) στα functional components. Μεταξύ των πολλών πλεονεκτημάτων που προσφέρουν, τα custom hooks ξεχωρίζουν ως ένας ισχυρός μηχανισμός για την εξαγωγή και επαναχρησιμοποίηση λογικής σε πολλαπλά components. Αυτό το άρθρο θα εμβαθύνει στον κόσμο των custom hooks, εξερευνώντας τα οφέλη, τη δημιουργία και τη χρήση τους με πρακτικά παραδείγματα.

Τι είναι τα Custom Hooks;

Στην ουσία, ένα custom hook είναι μια συνάρτηση JavaScript που ξεκινά με τη λέξη "use" και μπορεί να καλεί άλλα hooks. Σας επιτρέπουν να εξάγετε τη λογική ενός component σε επαναχρησιμοποιήσιμες συναρτήσεις. Αυτός είναι ένας ισχυρός τρόπος για να μοιραστείτε λογική με state (stateful logic), παρενέργειες (side effects) ή άλλες πολύπλοκες συμπεριφορές μεταξύ components, χωρίς να καταφεύγετε σε render props, higher-order components ή άλλα σύνθετα πρότυπα.

Βασικά Χαρακτηριστικά των Custom Hooks:

Σύμβαση Ονοματοδοσίας: Τα custom hooks πρέπει να ξεκινούν με τη λέξη "use". Αυτό σηματοδοτεί στη React ότι η συνάρτηση περιέχει hooks και πρέπει να ακολουθεί τους κανόνες των hooks.
Επαναχρησιμοποίηση: Ο πρωταρχικός σκοπός είναι η ενθυλάκωση επαναχρησιμοποιήσιμης λογικής, καθιστώντας εύκολη την κοινή χρήση λειτουργικότητας μεταξύ components.
Λογική με State: Τα custom hooks μπορούν να διαχειριστούν το δικό τους state χρησιμοποιώντας το useState hook, επιτρέποντάς τους να ενθυλακώνουν σύνθετη συμπεριφορά με state.
Παρενέργειες: Μπορούν επίσης να εκτελέσουν παρενέργειες χρησιμοποιώντας το useEffect hook, επιτρέποντας την ενσωμάτωση με εξωτερικά APIs, την ανάκτηση δεδομένων (data fetching) και άλλα.
Συνθετότητα: Τα custom hooks μπορούν να καλούν άλλα hooks, επιτρέποντάς σας να χτίσετε σύνθετη λογική συνθέτοντας μικρότερα, πιο εστιασμένα hooks.

Οφέλη από τη Χρήση των Custom Hooks

Τα custom hooks προσφέρουν αρκετά σημαντικά πλεονεκτήματα στην ανάπτυξη με React:

Επαναχρησιμοποίηση Κώδικα: Το πιο εμφανές όφελος είναι η δυνατότητα επαναχρησιμοποίησης λογικής σε πολλαπλά components. Αυτό μειώνει την επανάληψη κώδικα και προωθεί μια πιο DRY (Don't Repeat Yourself) κωδικοбаза.
Βελτιωμένη Αναγνωσιμότητα: Εξάγοντας την πολύπλοκη λογική σε ξεχωριστά custom hooks, τα components σας γίνονται πιο καθαρά και ευκολότερα στην κατανόηση. Η κύρια λογική του component παραμένει εστιασμένη στην απόδοση του UI.
Ενισχυμένη Συντηρησιμότητα: Όταν η λογική είναι ενθυλακωμένη σε custom hooks, οι αλλαγές και οι διορθώσεις σφαλμάτων μπορούν να εφαρμοστούν σε một μόνο σημείο, μειώνοντας τον κίνδυνο εισαγωγής σφαλμάτων σε πολλαπλά components.
Δυνατότητα Ελέγχου (Testability): Τα custom hooks μπορούν εύκολα να ελεγχθούν μεμονωμένα, διασφαλίζοντας ότι η επαναχρησιμοποιήσιμη λογική λειτουργεί σωστά ανεξάρτητα από τα components που τα χρησιμοποιούν.
Απλοποιημένα Components: Τα custom hooks βοηθούν στην αποσυμφόρηση των components, καθιστώντας τα λιγότερο περιγραφικά και πιο εστιασμένα στον πρωταρχικό τους σκοπό.

Δημιουργώντας το Πρώτο σας Custom Hook

Ας δείξουμε τη δημιουργία ενός custom hook με ένα πρακτικό παράδειγμα: ένα hook που παρακολουθεί το μέγεθος του παραθύρου.

Παράδειγμα: useWindowSize

Αυτό το hook θα επιστρέφει το τρέχον πλάτος και ύψος του παραθύρου του browser. Θα ενημερώνει επίσης αυτές τις τιμές όταν το παράθυρο αλλάζει μέγεθος.

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);

    // Αφαίρεση του event listener κατά την εκκαθάριση
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Ο κενός πίνακας διασφαλίζει ότι το effect εκτελείται μόνο κατά το mount

  return windowSize;
}

export default useWindowSize;

Επεξήγηση:

Εισαγωγή Απαραίτητων Hooks: Εισάγουμε τα useState και useEffect από τη React.
Ορισμός του Hook: Δημιουργούμε μια συνάρτηση με το όνομα useWindowSize, τηρώντας τη σύμβαση ονοματοδοσίας.
Αρχικοποίηση του State: Χρησιμοποιούμε το useState για να αρχικοποιήσουμε το state windowSize με το αρχικό πλάτος και ύψος του παραθύρου.
Ρύθμιση Event Listener: Χρησιμοποιούμε το useEffect για να προσθέσουμε έναν event listener 'resize' στο παράθυρο. Όταν το μέγεθος του παραθύρου αλλάζει, η συνάρτηση handleResize ενημερώνει το state windowSize.
Εκκαθάριση: Επιστρέφουμε μια συνάρτηση εκκαθάρισης από το useEffect για να αφαιρέσουμε τον event listener όταν το component γίνεται unmount. Αυτό αποτρέπει διαρροές μνήμης (memory leaks).
Επιστρεφόμενες Τιμές: Το hook επιστρέφει το αντικείμενο windowSize, που περιέχει το τρέχον πλάτος και ύψος του παραθύρου.

Χρήση του Custom Hook σε ένα Component

Τώρα που δημιουργήσαμε το custom hook μας, ας δούμε πώς να το χρησιμοποιήσουμε σε ένα React component.

import React from 'react';
import useWindowSize from './useWindowSize';

function MyComponent() {
  const { width, height } = useWindowSize();

  return (
    
      Πλάτος παραθύρου: {width}px
      Ύψος παραθύρου: {height}px
    
  );
}

export default MyComponent;

Επεξήγηση:

Εισαγωγή του Hook: Εισάγουμε το custom hook useWindowSize.
Κλήση του Hook: Καλούμε το hook useWindowSize μέσα στο component.
Πρόσβαση στις Τιμές: Κάνουμε destructuring στο επιστρεφόμενο αντικείμενο για να πάρουμε τις τιμές width και height.
Απόδοση Τιμών: Αποδίδουμε τις τιμές του πλάτους και του ύψους στο UI του component.

Οποιοδήποτε component χρησιμοποιεί το useWindowSize θα ενημερώνεται αυτόματα όταν αλλάζει το μέγεθος του παραθύρου.

Πιο Σύνθετα Παραδείγματα

Ας εξερευνήσουμε μερικές πιο προχωρημένες περιπτώσεις χρήσης για custom hooks.

Παράδειγμα: useLocalStorage

Αυτό το hook σας επιτρέπει να αποθηκεύετε και να ανακτάτε εύκολα δεδομένα από το local storage.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // State για την αποθήκευση της τιμής μας
  // Περνάμε την αρχική τιμή στο useState ώστε η λογική να εκτελεστεί μόνο μία φορά
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Λήψη από το local storage με βάση το κλειδί
      const item = window.localStorage.getItem(key);
      // Ανάλυση του αποθηκευμένου json ή επιστροφή της αρχικής τιμής αν δεν υπάρχει
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // Αν υπάρχει σφάλμα, επιστρέφουμε επίσης την αρχική τιμή
      console.log(error);
      return initialValue;
    }
  });

  // Επιστρέφουμε μια περιτυλιγμένη έκδοση της setter συνάρτησης του useState που...
  // ... αποθηκεύει μόνιμα τη νέα τιμή στο localStorage.
  const setValue = (value) => {
    try {
      // Επιτρέπουμε η τιμή να είναι συνάρτηση ώστε να έχουμε το ίδιο API με το useState
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // Αποθήκευση στο local storage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
      // Αποθήκευση του state
      setStoredValue(valueToStore);
    } catch (error) {
      // Μια πιο προχωρημένη υλοποίηση θα χειριζόταν την περίπτωση σφάλματος
      console.log(error);
    }
  };

  useEffect(() => {
    try {
      const item = window.localStorage.getItem(key);
      setStoredValue(item ? JSON.parse(item) : initialValue);
    } catch (error) {
      console.log(error);
    }
  }, [key, initialValue]);

  return [storedValue, setValue];
}

export default useLocalStorage;

Χρήση:

import React from 'react';
import useLocalStorage from './useLocalStorage';

function MyComponent() {
  const [name, setName] = useLocalStorage('name', 'Guest');

  return (
    
      Γεια σου, {name}!
       setName(e.target.value)}
      />
    
  );
}

export default MyComponent;

Παράδειγμα: useFetch

Αυτό το hook ενθυλακώνει τη λογική για την ανάκτηση δεδομένων από ένα API.

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`Σφάλμα HTTP! κατάσταση: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Χρήση:

import React from 'react';
import useFetch from './useFetch';

function MyComponent() {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/todos/1');

  if (loading) return Φόρτωση...;
  if (error) return Σφάλμα: {error.message};

  return (
    
      Τίτλος: {data.title}
      Ολοκληρώθηκε: {data.completed ? 'Ναι' : 'Όχι'}
    
  );
}

export default MyComponent;

Βέλτιστες Πρακτικές για τα Custom Hooks

Για να διασφαλίσετε ότι τα custom hooks σας είναι αποτελεσματικά και συντηρήσιμα, ακολουθήστε αυτές τις βέλτιστες πρακτικές:

Κρατήστε τα Εστιασμένα: Κάθε custom hook πρέπει να έχει έναν μοναδικό, καλά καθορισμένο σκοπό. Αποφύγετε τη δημιουργία υπερβολικά πολύπλοκων hooks που προσπαθούν να κάνουν πάρα πολλά.
Τεκμηριώστε τα Hooks σας: Παρέχετε σαφή και περιεκτική τεκμηρίωση για κάθε custom hook, εξηγώντας τον σκοπό, τις εισόδους και τις εξόδους του.
Ελέγξτε τα Hooks σας: Γράψτε unit tests για τα custom hooks σας για να διασφαλίσετε ότι λειτουργούν σωστά και αξιόπιστα.
Χρησιμοποιήστε Περιγραφικά Ονόματα: Επιλέξτε περιγραφικά ονόματα για τα custom hooks σας που υποδεικνύουν σαφώς τον σκοπό τους.
Χειριστείτε τα Σφάλματα με Χάρη: Εφαρμόστε χειρισμό σφαλμάτων μέσα στα custom hooks σας για να αποτρέψετε απροσδόκητη συμπεριφορά και να παρέχετε κατατοπιστικά μηνύματα σφάλματος.
Λάβετε υπόψη την Επαναχρησιμοποίηση: Σχεδιάστε τα custom hooks σας με γνώμονα την επαναχρησιμοποίηση. Κάντε τα αρκετά γενικά ώστε να μπορούν να χρησιμοποιηθούν σε πολλαπλά components.
Αποφύγετε την Υπερ-Αφαίρεση (Over-Abstraction): Μην δημιουργείτε custom hooks για απλή λογική που μπορεί εύκολα να χειριστεί μέσα σε ένα component. Εξάγετε μόνο λογική που είναι πραγματικά επαναχρησιμοποιήσιμη και πολύπλοκη.

Συνηθισμένες Παγίδες προς Αποφυγή

Παραβίαση των Κανόνων των Hooks: Πάντα να καλείτε τα hooks στο ανώτατο επίπεδο της συνάρτησης του custom hook σας και να τα καλείτε μόνο από React function components ή άλλα custom hooks.
Αγνόηση των Εξαρτήσεων στο useEffect: Βεβαιωθείτε ότι περιλαμβάνετε όλες τις απαραίτητες εξαρτήσεις στον πίνακα εξαρτήσεων (dependency array) του useEffect hook για να αποτρέψετε παλιές τιμές (stale closures) και απροσδόκητη συμπεριφορά.
Δημιουργία Ατελείωτων Βρόχων (Infinite Loops): Να είστε προσεκτικοί όταν ενημερώνετε το state μέσα σε ένα useEffect hook, καθώς αυτό μπορεί εύκολα να οδηγήσει σε ατελείωτους βρόχους. Διασφαλίστε ότι η ενημέρωση είναι υπό συνθήκη και βασίζεται σε αλλαγές στις εξαρτήσεις.
Παράλειψη της Εκκαθάρισης: Πάντα να περιλαμβάνετε μια συνάρτηση εκκαθάρισης στο useEffect για να αφαιρείτε event listeners, να ακυρώνετε συνδρομές και να εκτελείτε άλλες εργασίες εκκαθάρισης για την πρόληψη διαρροών μνήμης.

Προχωρημένα Πρότυπα

Σύνθεση Custom Hooks

Τα custom hooks μπορούν να συντεθούν μαζί για να δημιουργήσουν πιο σύνθετη λογική. Για παράδειγμα, θα μπορούσατε να συνδυάσετε ένα useLocalStorage hook με ένα useFetch hook για να αποθηκεύσετε αυτόματα τα ανακτημένα δεδομένα στο local storage.

Διαμοιρασμός Λογικής μεταξύ Hooks

Αν πολλαπλά custom hooks μοιράζονται κοινή λογική, μπορείτε να εξάγετε αυτή τη λογική σε μια ξεχωριστή βοηθητική συνάρτηση (utility function) και να την επαναχρησιμοποιήσετε και στα δύο hooks.

Χρήση του Context με Custom Hooks

Τα custom hooks μπορούν να χρησιμοποιηθούν σε συνδυασμό με το React Context για πρόσβαση και ενημέρωση του καθολικού (global) state. Αυτό σας επιτρέπει να δημιουργήσετε επαναχρησιμοποιήσιμα components που έχουν επίγνωση και μπορούν να αλληλεπιδράσουν με το καθολικό state της εφαρμογής.

Παραδείγματα από τον Πραγματικό Κόσμο

Εδώ είναι μερικά παραδείγματα για το πώς μπορούν να χρησιμοποιηθούν τα custom hooks σε πραγματικές εφαρμογές:

Επικύρωση Φόρμας: Δημιουργήστε ένα useForm hook για να χειριστείτε το state, την επικύρωση και την υποβολή μιας φόρμας.
Αυθεντικοποίηση: Υλοποιήστε ένα useAuth hook για τη διαχείριση της αυθεντικοποίησης και της εξουσιοδότησης του χρήστη.
Διαχείριση Θέματος: Αναπτύξτε ένα useTheme hook για την εναλλαγή μεταξύ διαφορετικών θεμάτων (φωτεινό, σκούρο, κ.λπ.).
Γεωτοποθεσία: Κατασκευάστε ένα useGeolocation hook για την παρακολούθηση της τρέχουσας τοποθεσίας του χρήστη.
Ανίχνευση Κύλισης: Δημιουργήστε ένα useScroll hook για να ανιχνεύσετε πότε ο χρήστης έχει κυλίσει σε ένα συγκεκριμένο σημείο της σελίδας.

Παράδειγμα : hook useGeolocation για διαπολιτισμικές εφαρμογές όπως χαρτογράφηση ή υπηρεσίες παράδοσης

import { useState, useEffect } from 'react';

function useGeolocation() {
  const [location, setLocation] = useState({
    latitude: null,
    longitude: null,
    error: null,
  });

  useEffect(() => {
    if (!navigator.geolocation) {
      setLocation({
        latitude: null,
        longitude: null,
        error: 'Η Γεωτοποθεσία δεν υποστηρίζεται από αυτόν τον browser.',
      });
      return;
    }

    const watchId = navigator.geolocation.watchPosition(
      (position) => {
        setLocation({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => {
        setLocation({
          latitude: null,
          longitude: null,
          error: error.message,
        });
      }
    );

    return () => navigator.geolocation.clearWatch(watchId);
  }, []);

  return location;
}

export default useGeolocation;

Συμπέρασμα

Τα custom hooks είναι ένα ισχυρό εργαλείο για τη συγγραφή καθαρότερου, πιο επαναχρησιμοποιήσιμου και πιο συντηρήσιμου κώδικα React. Ενθυλακώνοντας πολύπλοκη λογική σε custom hooks, μπορείτε να απλοποιήσετε τα components σας, να μειώσετε την επανάληψη κώδικα και να βελτιώσετε τη συνολική δομή των εφαρμογών σας. Υιοθετήστε τα custom hooks και απελευθερώστε τις δυνατότητές τους για να χτίσετε πιο στιβαρές και επεκτάσιμες εφαρμογές React.

Ξεκινήστε εντοπίζοντας περιοχές στην υπάρχουσα κωδικοбаза σας όπου η λογική επαναλαμβάνεται σε πολλαπλά components. Στη συνέχεια, αναδομήστε (refactor) αυτή τη λογική σε custom hooks. Με τον καιρό, θα χτίσετε μια βιβλιοθήκη επαναχρησιμοποιήσιμων hooks που θα επιταχύνει τη διαδικασία ανάπτυξής σας και θα βελτιώσει την ποιότητα του κώδικά σας.

Θυμηθείτε να ακολουθείτε τις βέλτιστες πρακτικές, να αποφεύγετε τις συνηθισμένες παγίδες και να εξερευνάτε προχωρημένα πρότυπα για να αξιοποιήσετε στο έπακρο τα custom hooks. Με πρακτική και εμπειρία, θα γίνετε ειδικός στα custom hooks και ένας πιο αποτελεσματικός προγραμματιστής React.